<template>
	<view class="kda">
		<view class="top">
			<view class="stop"></view>
			<view class="xbottom"></view>
		</view>
		<view class="text" @click="checkout">
			换一换
		</view>
		<view class="title" v-for="(v,i) in k" :key="i">
			{{v}}
		</view>
	</view>
	
</template> 

<script>
export default {
	data() {
		return {
			k:[]
		};
	},
	onLoad() {
		this.getList()
	},
	onShow() {
		
	},
	onHide() {
		
	},
	methods: {
		async getList() {
			const _this = this 
			for(let i =0;i<10;i++){
				const data1 = await uni.request({
					url:'https://v1.hitokoto.cn/?c=f&encode=text',// mock地址
					method:'GET',
					success(res) {
						console.log(res,'res',this);
						_this.k.push(res.data)
						
					}
				})
			}
			// console.log(data1);
		},
		 checkout() {
			this.k = []
			const _this = this
			for(let i =0;i<10;i++){
				const data1 = uni.request({
					url:'https://v1.hitokoto.cn/?c=f&encode=text',// mock地址
					method:'GET',
					success(res) {
						console.log(res,'res',this);
						
						_this.k.push(res.data)
						_this.$set(_this.k,'data',res.data)
					}
				})
			}
				
			
			
		},
	}
};
</script>

<style>
.top{
	width: 100%;
	height: 80px;
}
.stop{
	width: 100%;
	height: 50px;
	background-color: skyblue;
}
.xbottom{
	width: 100%;
	height: 30px;
	background-image:linear-gradient(skyblue,white);
	border-bottom-left-radius:30px;
	border-bottom-right-radius:30px;
}
.text{
	width: 100%;

	font-weight: bold;
	color: darkred;
	margin: 0 auto;
	height: 60px;
	line-height: 60px;
	text-align: center;
	text-shadow: 0 0 #000, 0 2px 2px rgba(45, 175, 230, 0.75);
	border-left-radius:30px;
	border-right-radius:30px;
	background-image:linear-gradient(white,blanchedalmond);
	border: solid 2px red;
	position: fixed;
	right: 0;
	bottom: 0;
}
.title{
	padding: 5px;
	background-color: blanchedalmond;
	margin-top: 30px;
	text-align: center;
	font-weight: bold;
	width: 90%;
	margin: 0 auto;
	line-height: 50px;
}
</style>